<template>
  <div class="tabs ">
    <div class="tabs_bt">
      <router-link  to="tabs1" >   <div class="tabs_bt_div" style="color: #333333">学习时长排行</div></router-link>
      <router-link  to="tabs2" > <div class="tabs_bt_div" style="border-bottom :2px solid #3B50A1;color: #3B50A1;">答题数排行</div></router-link>
      <router-link  to="tabs3" ><div class="tabs_bt_div" style="color: #333333">模拟次数排行</div></router-link>
      <router-link  to="tabs4" ><div class="tabs_bt_div" style="color: #333333">正确率排行</div></router-link>
    </div>
    <!--标签1-->
    <Table :columns="columns1" :data="data1"></Table>
    <div @click="load1" style="text-align: center;margin-top: 13px; cursor: pointer;">查看更多</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        columns1: [
          {
            title: '排名',
            key: 'no', align: 'center',
            render: (h, params) => {
              if (params.row.no==1){
                return h('div', [
                  h('img', {
                    attrs: {
                      src:"http://sw.sdrhup.com:8080/education/images/top1.jpg"
                    },
                    style: {
                      //  marginTop:'5px',/
                      width:'33px',
                      height:'39px'
                    },
                  }),
                ]);
              }else if(params.row.no==2){
                return h('div', [
                  h('img', {
                    attrs: {
                      src:"http://sw.sdrhup.com:8080/education/images/top2.jpg"
                    },
                    style: {
                      //  marginTop:'5px',/
                      width:'33px',
                      height:'39px'
                    },
                  }),
                ]);
              }else if(params.row.no==3){
                return h('div', [
                  h('img', {
                    attrs: {
                      src:"http://sw.sdrhup.com:8080/education/images/top3.jpg"
                    },
                    style: {
                      //  marginTop:'5px',/
                      width:'33px',
                      height:'39px'
                    },
                  }),
                ]);
              }else{
                return h('div', params.row.no);
              }
            }
          },
          { align: 'center',
            title: '姓名',
            key: 'name'
          },
          { align: 'center',
            title: '学习时长(小时)',
            key: 'time',
            "width": 120,
          },
          { align: 'center',
            title: '答题数',
            key: 'daNum'
          },
          { align: 'center',
            title: '模拟次数',
            key: 'frequency'
          },
          { align: 'center',
            title: '正确率',
            key: 'percent'
          },
          { align: 'center',
            title: '最高分',
            key: 'highest'
          }
        ],
        data1: [
//                {
//                  no:1,//排名
//                  name: '程纪强的',//姓名
//                  time:1333,//学习时长
//                  daNum:9999,//答题数
//                  frequency:1,//模拟次数
//                  percent:'11%',//正确率
//                  highest:11,//最高分
//                },
        ],
        pageIndex:1,
      }
    },
    methods: {
      load1() {//查看更多
        this.pageIndex++;
        this.listData()
      },
      listData(){
        this.$axios({
          url: 'web/leaderBoard/personal',
          method: 'POST',
          data:{
            pageIndex:this.pageIndex,//多少页
            pageSize:10,//每页大小
            sort:{
              name:'numberOfAnswers',
              direction:'DESC'
            }
          },
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function(data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
          var num=(this.pageIndex*10)-10
          for(var i=0;i<response.data.length;i++){
            this.data1.push(
              {
                no: num+(i+1),//排名
                name: response.data[i].username,//姓名
                time:  parseFloat(response.data[i].studyTime/3600).toFixed(2),//学习时长
                daNum:  response.data[i].numberOfAnswers,//答题数
                frequency: response.data[i].examCount,//模拟次数
                percent: parseInt(response.data[i].correctRate)*100+'%',//正确率
                highest:  response.data[i].highestGrade,//最高分
              })
          }
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('登陆失败！')
        });
      },
    },
    mounted:function() {
      //渲染列表
      this.listData();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .tabs{
    margin:auto;
    width:1081px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:2px;
    padding: 21px;
    margin-bottom: 40px;
  }
  .tabs_bt_div{
    display: inline-block;
    font-size:18px;
    height: 40px;
    width: 140px;
    text-align: center;
    margin: 10px 10px 16px  10px;
    cursor: pointer;
  }
</style>
